---
title: <media-control-bar>
description: Media Control Bar
layout: ../../../../layouts/ComponentLayout.astro
source: https://github.com/muxinc/media-chrome/tree/main/src/js/media-control-bar.js
---

import SandpackContainer from "../../../../components/SandpackContainer.astro";

The `<media-control-bar>` container component is used to make layout and styling of your controls as a "control bar" easier.

## Default usage

By default, `<media-control-bar>` will try to scale down other Media Chrome components if there is not enough room and will grow to the width of the `<media-controller>`.

<SandpackContainer
  html={`<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-seek-backward-button></media-seek-backward-button>
    <media-seek-forward-button></media-seek-forward-button>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
    <media-time-display></media-time-display>
    <media-captions-button></media-captions-button>
    <media-playback-rate-button></media-playback-rate-button>
    <media-pip-button></media-pip-button>
    <media-fullscreen-button></media-fullscreen-button>
    <media-airplay-button></media-airplay-button>
  </media-control-bar>
</media-controller>`}
  hiddenCss={"div { font-size: 0; }"}
/>

## Use with `<media-time-range>`

`<media-control-bar>` will expand the `<media-time-range>` if there is extra space available.

<SandpackContainer
  html={`<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-seek-backward-button></media-seek-backward-button>
    <media-seek-forward-button></media-seek-forward-button>
    <media-mute-button></media-mute-button>
    <media-time-display></media-time-display>
    <media-time-range></media-time-range>
  </media-control-bar>
</media-controller>`}
  hiddenCss={"div { font-size: 0; }"}
/>

## Use as separate control bar

`<media-control-bar>` can be used as a control bar outside of the `<media-controller>` by using the `mediacontroller` attribute.

<SandpackContainer
  html={`<div>
  <media-controller id="mc">
    <video
      playsinline muted crossorigin
      slot="media"
      src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    ></video>
  </media-controller>
  <media-control-bar style="width: 100%" mediacontroller="mc">
    <media-play-button></media-play-button>
    <media-seek-backward-button></media-seek-backward-button>
    <media-seek-forward-button></media-seek-forward-button>
    <media-mute-button></media-mute-button>
    <media-time-display></media-time-display>
    <media-time-range></media-time-range>
  </media-control-bar>
</div>`}
  hiddenCss={"div { font-size: 0; }"}
/>
